<template>
  <div id="components-form-demo-advanced-search">
    <a-form class="ant-advanced-search-form" :form="form" @submit="handleSearch" style="padding: 10px">
      <a-row :gutter="24" >
        <a-col
          v-for="(item,index) in ['姓名','学号','班级','性别']"
          :key="item"
          :span="8"
          :style="{ display: index < count ? 'block' : 'none' }"
        >
          <a-form-item :label="`${item}`">
            <a-input
              v-decorator="[
                `s${index}`,
                {
                  rules: [
                    {
                      required: false,
                      message: 'Input something!',
                    },
                  ],
                },
              ]"
              :placeholder="`请输入${item}`"
            />
          </a-form-item>
        </a-col>
        <a-col :span="24" :style="{ textAlign: 'right' }">
          <a-button type="primary" html-type="submit">
            查询
          </a-button>
          <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
            重置
          </a-button>
          <a :style="{ marginLeft: '8px', fontSize: '12px' }" @click="toggle">
            展开
            <a-icon :type="expand ? 'up' : 'down'"/>
          </a>
        </a-col>
      </a-row>
      <a-row>

      </a-row>
    </a-form>
    <div class="search-result-list">
      <a-button type="primary"
                class="addStudent"
                @click="addStudentClick"

      >
        新增
      </a-button>
      <add-student @addStudent="addStudent"></add-student>
      <edit-student :Studentdata="Studentdata"
                    @editStudent="editStudent"
      ></edit-student>
      <ShowStudent :Studentdata="newStudentData"
                   @studentDelete="studentDelete"
                   @editStudent2="editStudent2"></ShowStudent>
    </div>
  </div>
</template>
<script>
  import ShowStudent from "./childComps/ShowStudent";
  import axios from "axios";
  import AddStudent from "./childComps/AddStudent";
  import EditStudent from "./childComps/EditStudent";

  export default {
    components: {AddStudent, ShowStudent, EditStudent},
    data() {
      return {
        key: String,
        Studentdata: [],
        newStudentData: this.Studentdata,
        expand: false,
        form: this.$form.createForm(this, {name: 'advanced_search'}),
      };
    },
    computed: {
      count() {
        return this.expand ? 4 : 2;
      },
    },
    beforeCreate() {
      axios.get('/mock/student').then(res => {
        this.Studentdata = res.data
      }).then(() => {
        this.newStudentData = this.Studentdata

      })
      //
    },
    updated() {
      // this.newStudentData = this.Studentdata
    },
    methods: {
      editStudent(values) {
        const key = this.key
        let newStudentItem = {
          key: key,
          name: values.name,
          id: values.id,
          className: values.className,
          sex: values.sex,
        }
        const newData = this.Studentdata.map(item => item.key === key ? newStudentItem : item);
        this.Studentdata = newData
        this.newStudentData = this.Studentdata
      },
      editStudent2(key) {
        this.key = key;
      },
      addStudentClick() {
        this.$store.commit('changeVisibe')
      },
      addStudent(values) {
        // const newData = this.Studentdata.unshift(values);
        // this.Studentdata = newData
        // console.log(this.Studentdata[0])
        const length = this.Studentdata.length;
        for (let i = 0; i < length; i++) {
          this.Studentdata[i].key = (parseInt(this.Studentdata[i].key) + 1).toString();
        }
        this.Studentdata.unshift({
          key: '1',
          name: values.name,
          id: values.id,
          className: values.className,
          sex: values.sex,
        })
        this.newStudentData = this.Studentdata

      },
      studentDelete(key) {
        const newData = this.Studentdata.filter(item => item.key !== key);
        this.Studentdata = newData
        this.newStudentData = this.Studentdata
        for (let i = parseInt(key) - 1; i < this.Studentdata.length; i++) {
          this.Studentdata[i].key = (parseInt(this.Studentdata[i].key) - 1).toString();
        }
      },
      getNull(UndefinedString) {
        if (!UndefinedString) {
          UndefinedString = '';
        }
        return UndefinedString
      },

      handleSearch(e) {
        e.preventDefault();
        this.form.validateFields((error, values) => {
          console.log(values)
          let name = values.s0;
          let id = values.s1;
          let className = values.s2;
          let sex = values.s3;
          name = this.getNull(name)
          sex = this.getNull(sex)
          id = this.getNull(id)
          className = this.getNull(className)
          let newStudentList = []
          this.Studentdata.filter(item => {
            if (item.name.indexOf(name) !== -1
              && item.sex.indexOf(sex) !== -1
              && item.id.indexOf(id) !== -1
              && item.className.indexOf(className) !== -1
            ) {
              newStudentList.push(item);
            }
          })
          this.newStudentData = newStudentList
        });
        this.$bus.$emit('childMo', this.newStudentData);
      },

      handleReset() {
        this.form.resetFields();
      },

      toggle() {
        this.expand = !this.expand;
      },
    },
  };
</script>
<style>

  .ant-advanced-search-form {
    background-color: white;
    padding: 10px;
    /*background: #fbfbfb;*/
    border: 1px solid #d9d9d9;
    border-radius: 6px;
  }

  .ant-advanced-search-form .ant-form-item {
    display: flex;

  }

  .ant-advanced-search-form .ant-form-item-control-wrapper {
    flex: 1;
  }

  #components-form-demo-advanced-search {
    padding-top: 10px;
    width: 95%;
    margin: 0 auto;
    max-width: 750px;
  }

  #components-form-demo-advanced-search .search-result-list {
    margin-top: 16px;
    border: 1px dashed #e9e9e9;
    border-radius: 6px;
    background-color: #fafafa;
    min-height: 200px;
    text-align: center;
    padding-top: 80px;
    position: relative;
  }

  .addStudent {
    /*left: 0;*/
    right: 280px;
  }
</style>